<template>
	<view class="score" :style="{top:getStatusBarHeight()+'px'}" >
		<view class="scoreView" @click="$emit('addScoreClick')">
			<image class="coin" src="../../static/shouye/ic_coin.png" mode="aspectFill"></image>
			<view class="text">
				{{score}}
			</view>
			<image class="add" src="../../static/shouye/ic_add.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getStatusBarHeight,
		getTitleBarHeight,
		getNavBarHeight,
		getLeftIconLeft
	} from "@/utils/system.js"

	defineProps({
		level: {
			type: Number,
			default: 1
		},
		score: {
			type: Number,
			default: 0
		}
	})
</script>

<style lang="scss" scoped>

		.score {
			position: fixed;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: row;
			// margin-left: 200rpx;
			padding: 5rpx 10rpx;

			z-index: 999;

			.scoreView {
				border-radius: 45rpx;
				width: fit-content;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: row;
				background-color: rgba(0, 0, 0, 0.5);
				font-size: 22px;
				padding: 5rpx 15rpx;
				font-weight: 700;
				color: black;

				.coin {
					height: 50rpx;
					width: 50rpx;
				}

				.add {
					height: 30rpx;
					width: 30rpx;
				}

				.text {
					color: white;
					margin-left: 20rpx;
					margin-right: 20rpx;
				}
			}
		}

</style>